<style lang="less">
    @import "tokenMana.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Alert show-icon>
                            踢人后用户必须重新登录
                        </Alert>
                    </Row>
                    <Row class="operation">
                        <Button @click="getTokenList" icon="md-refresh">刷新</Button>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
                            <template slot-scope="{ row, index }" slot="action">
                                <div>
                                    <Button type="error" size="small" @click="remove(row)">踢人</Button>
                                </div>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage"
                              @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total
                              show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import {
        fetchList,
        delObj
    } from "@/projects/basic/api/admin/tokenmana";
    import circleLoading from "_c/circle-loading/circle-loading.vue";

    export default {
        name: "token-manage",
        components: {
            circleLoading
        },
        data() {
            return {
                columns: [

                    {
                        title: "登录名",
                        key: "username",
                        align: "center"
                    },
                    {
                        title: "登录用户",
                        key: "userRealName",
                        align: "center"
                    },
                    {
                        title: "access_token",
                        key: "access_token"
                        ,
                        tooltip: true
                    },
                    {
                        title: "refresh_token",
                        key: "refresh_token",
                        tooltip: true
                    },
                    {
                        title: "scope",
                        key: "scope",
                        tooltip: true
                    },
                    {
                        title: "过期时间(秒)",
                        key: "expires_in",
                        sortable: true
                    },
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        slot: 'action'
                    }
                ],
                data: [],
                pageNumber: 1,
                pageSize: 10,
                total: 0,
                loading: true
            };
        },
        methods: {
            init() {
                this.getTokenList();
            },
            changePage(v) {
                this.pageNumber = v;
                this.getTokenList();
            },
            changePageSize(v) {
                this.pageSize = v;
                this.getLogList();
            },
            getTokenList() {
                this.loading = true;
                let params = "";
                params = {
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize
                };
                fetchList(params).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认踢人",
                    content: "您确认要提出" + v.username + "?",
                    onOk: () => {
                        delObj(v.access_token).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.init();
                            }
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
